<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>热门活动</title>
		<style>
			* {
				margin: 0;
				padding: 0px;
			}
			
			.a {
				width: 700px;
				margin: 10px auto;
			}
			
			.b {
				overflow: hidden;
			}
			
			h3 {
				float: left;
			}
			
			h4 {
				float: right;
			}
			
			li {
				display: inline-block;
				padding: 20px 18px;
				font-size: 12px;
			}
			
			li a:link {
				color: black;
				text-decoration: none;
			}
			
			li a:hover {
				color: deeppink;
			}
			
			.b h4 a:link {
				color: gray;
				font-size: 14px;
				text-decoration: none;
			}
			
			.b h4 a:hover {
				color: yellowgreen;
				font-size: 16px;
			}
		</style>
	</head>

	<body>
		<div class="a">
			<div class="b">
				<h3>热门活动</h3>
				<h4><a href="#">更多</a></h4>
			</div>

			<ul>
				<li>
					<a href="#"><img src="img/img1.png" /></a>
					<p>
						<a href="#">推荐活动 | 原创音乐现金榜T榜</a>
					</p>
				</li>
				<li>
					<a href="#"><img src="img/img2.png" /></a>
					<p>
						<a href="#">推荐节目|《TAImusic》爆笑来袭</a>
					</p>
				</li>
				<li>
					<a href="#"><img src="img/img3.png" /></a>
					<p>
						<a href="#">推荐歌单 | 继续宠爱张国荣</a>
					</p>
				</li>
				<li>
					<a href="#"><img src="img/img4.png" /></a>
					<p>
						<a href="#">推荐活动| 330金属音乐巡演 成都小酒馆音乐空间</a>
					</p>
				</li>
			</ul>
		</div>
	</body>

</html>